<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { Search } from '@element-plus/icons-vue'
import { ElButton, ElCard } from 'element-plus'
import { useRouter } from 'vue-router'

import ReviewForm from './review-form.vue'

const childReviewForm = ref<InstanceType <typeof ReviewForm> | null>(null)
const { push } = useRouter()

const gridOptions = reactive<VxeGridProps>({
    align: null,
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'a1', title: '产品编码' },
        { field: 'a2', title: '万科商城ID' },
        { field: 'a3', title: '产品名称' },
        { field: 'a4', title: '品牌' },
        { field: 'a5', title: '型号' },
        { field: 'a6', title: '单位' },
        { field: 'a7', title: '价格' },
        { field: 'a8', title: '价格(含税)' },
        { field: 'a9', title: '数量' },
        { field: 'a10', title: '税率' },

    ],
    data: [],
    height: 300,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})
function goBack() {
    push(
        {
            path: '/operations-pages/strategic-agreement/protocol-list',
        },
    )
}
function showReviewForm() {
    unref(childReviewForm)!.handleAddOpen()
}
</script>

<template>
    <div class="flex flex-col gap-20">
        <ElCard shadow="never">
            <div class="mb-20 font-700">
                123455
            </div>

            <ElButton type="primary">
                导出明细
            </ElButton>
        </ElCard>

        <ElCard shadow="never">
            <template #header>
                <div class="card-header font-700">
                    <span>基本信息</span>
                </div>
            </template>

            <el-row :gutter="20">
                <el-col :span="6">
                    协议开始时间：xxxx
                </el-col>

                <el-col :span="6">
                    协议结束时间：xxxx
                </el-col>

                <el-col :span="6">
                    协议类目：xxxx
                </el-col>

                <el-col :span="6">
                    协议类型：xxxx
                </el-col>

                <el-col :span="6">
                    甲方：xxxx
                </el-col>

                <el-col :span="6">
                    乙方：xxxx
                </el-col>

                <el-col :span="6">
                    协议附件：xxxx
                </el-col>
            </el-row>
        </ElCard>

        <ElCard shadow="never">
            <template #header>
                <div class="card-header font-700">
                    <span>协议产品</span>
                </div>
            </template>

            <vxe-grid v-bind="gridOptions">
                <template #toolbar_buttons>
                    <div class="w-full flex justify-end">
                        <el-input style="max-width: 300px;min-width:300px"
                                  placeholder="请输入关键字"
                                  class="input-with-select"
                        >
                            <template #append>
                                <ElButton :icon="Search"
                                          style="background: #da0004; color:#fff"
                                />
                            </template>
                        </el-input>
                    </div>
                </template>
            </vxe-grid>
        </ElCard>

        <ElCard shadow="never">
            <div class="flex justify-center">
                <ElButton @click="goBack">
                    返回
                </ElButton>

                <ElButton type="primary"
                          @click="showReviewForm"
                >
                    审核通过
                </ElButton>

                <ElButton>驳回</ElButton>
            </div>
        </ElCard>
    </div>

    <ReviewForm ref="childReviewForm" />
</template>

<style scoped>
.el-col {
    margin-bottom: 28px;
    font-size: 16px;
    color: #1d2129;
}
</style>
